<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>患者信息</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
    <!-- 第一个模块开始 -->
    <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-body">
          
	<!-- 查询条件开始 -->
	<br/>
	<form action="" class="layui-form" method="post">
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">身份证号</label>
				<div class="layui-input-inline">
					<input name="patientIdcard" class="layui-input" type="text" autocomplete="off">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">姓名</label>
				<div class="layui-input-inline">
					<input name="patientName" class="layui-input" type="text" autocomplete="off">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">性别</label>
				<div class="layui-input-inline">
					<input name="patientGender" title="男" type="radio" value="男">
      				<input name="patientGender" title="女" type="radio" value="女">
				</div>
			</div>
			
			<div class="layui-inline" style="float:right">
			    <div class="layui-input-block" style="float:right">
			      <button class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-search" type="submit" lay-filter="doSearch" id="doSearch" lay-submit="">查询</button>
			      <button class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh" type="reset">重置</button>
			    </div>
			 </div>
			
		</div>
	</form>
	
	<!-- 查询条件结束 -->
	
	<!-- 数据表格开始 -->
	<table class="layui-hide" id="userTable" lay-filter="userTable" ></table>
	<div style="display: none;" id="userToolBar">
		<button class="layui-btn layui-btn-sm" type="button" lay-event="add">增加</button>
		<button class="layui-btn layui-btn-danger layui-btn-sm" type="button"
			lay-event="batchDelete">批量删除</button>
	</div>
	<div style="display: none;" id="rightToolBar">
		<button class="layui-btn layui-btn-sm" type="button" lay-event="edit">编辑</button>
		<button class="layui-btn layui-btn-danger layui-btn-sm" type="button" lay-event=delete>删除</button>
	</div>
	<!-- 数据表格结束 -->
	    </div>
    </div>
    </div>
    <!-- 第一个模块结束 -->
    
    </div>
   </div>
	
	
	<!-- 弹出层开始 -->
	<div style="display:none;" id="addOrEditDiv">
		<form id="dataForm" lay-filter="dataForm" class="layui-form layui-form-pane " style="padding: 20px" action="">
			<div class="layui-form-item" style="display:none">
				<label class="layui-form-label">隐藏域保存患者id</label>
				<div class="layui-input-block">
					<input name="patientId" class="layui-input" type="text" id="patientId"
						placeholder="id" autocomplete="off">
				</div>
			</div>
		
			<div class="layui-form-item">
				<label class="layui-form-label">姓名</label>
				<div class="layui-input-block">
					<input name="patientName" class="layui-input" type="text"  lay-verify="required"
						placeholder="姓名" autocomplete="off">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">身份证号</label>
				<div class="layui-input-block">
					<input name="patientIdcard" class="layui-input" type="text" lay-verify="required|identity"
						placeholder="身份证号" autocomplete="off">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">单选框</label>
				<div class="layui-input-block">
					<input name="patientGender" title="男" type="radio" value="男">
					<input name="patientGender" title="女" type="radio" value="女">
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">联系方式</label>
					<div class="layui-input-inline">
						<input name="patientTel" class="layui-input" type="tel" lay-verify="required|phone"
							autocomplete="off">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">联系地址</label>
					<div class="layui-input-inline">
						<input name="address" class="layui-input" type="text" lay-verify="required"
							autocomplete="off">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">年龄</label>
					<div class="layui-input-inline">
						<input name="patientAge" class="layui-input" type="text"
							autocomplete="off">
					</div>
				</div>
			</div>

			<div class="layui-form-item" align="center">
				<div class="layui-input-block">
					<button class="layui-btn layui-btn-sm layui-icon layui-icon-release" type="submit" lay-filter="doSubmit" lay-submit="">保存</button>
					<button class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh " type="reset">重置</button>
				</div>
			</div>
		</form>
	</div>
	<!-- 弹出层结束 -->

	<script src="../../layuiadmin/layui/layui.js" charset="utf-8"></script>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

	<script type="text/javascript">
		layui.use([ 'element', 'jquery', 'layer', 'form', 'table' ],
				function() {
					var element = layui.element;
					var $ = layui.jquery;
					var layer = layui.layer;
					var form = layui.form;
					var table = layui.table;
					//渲染表格
					table.render({
						elem : '#userTable',
						url : '/patient/patientlist',
						title : '用户数据表',
						toolbar : "#userToolBar",
						height: 'full-130',
						skin: 'row',
						limits:[10,20,30],
						even: true,//开启隔行背景
						page :true,
						cols : [ [

						{
							type : 'checkbox',
							fixed : 'left'
						}, {
							field : 'patientId',
							title : 'ID',
							width : 200,
							fixed : 'left',
							align : 'center'
						},{
							field : 'patientName',
							title : '姓名',
							width : 130
						},  {
							field : 'patientIdcard',
							title : '身份证号',
							width : 160
						}, {
							field : 'patientGender',
							title : '性别',
							width : 80
						}, {
							field : 'patientAge',
							title : '年龄',
							width : 80
						}, {
							field : 'patientTel',
							title : '联系电话',
							width : 120
						}, {
							field : 'address',
							title : '地址',
							width:120
						}, {
							fixed : 'right',
							align : 'center',
							toolbar : '#rightToolBar'
						}

						] ]

					});
					//监听事件
					//1.头部工具栏事件
					table.on('toolbar(userTable)', function(obj) {
						switch (obj.event) {
						case 'add':
							openAdd();
							break;
						case 'batchDelete':
							alert("batchDelete");
							var checkStatus = table.checkStatus(obj.config.id);
							var data = checkStatus.data; //选中行的数组
     						//console.log(data);
							var patientId = "";
							$.each(data,function(i,n){
								patientId = patientId+data[i].patientId+",";
							});
							//alert(patientId);
							$.get('/patient/patientDelete?patientId='+patientId);
							break;
						}
						;
					});
					//5行中工具条事件
					table.on('tool(userTable)', function(obj) { //注：tool 是工具条事件名，userTable 是 table 原始容器的属性 lay-filter="对应的值"
						var data = obj.data; //获得当前行数据
						var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

						if (layEvent === 'delete') { //删除
							layer.confirm('真的删除行么', function(index) {
								//向服务端发送删除指令
								var patientId = data.patientId;
								$.get('/patient/patientDelete?patientId='+patientId); 
								//alert(id);
								obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
								layer.close(index);
								layer.msg('删除');
							});
							
						} else if (layEvent === 'edit') { //编辑
							openEdit(data);
						}
					});
					var layers;
					//打开添加页面
					function openAdd(){
						layers = layer.open({
							type:1,
							title:'添加患者',
							content:$("#addOrEditDiv"),
							area:['800px'],
							success:function(index){
								$("#dataForm")[0].reset();
								$("#patientId").val("");
								//alert("add");
							}
						});
					}
					
					//打开修改页面
					function openEdit(data){
						layers = layer.open({
							type:1,
							title:'修改患者信息',
							content:$("#addOrEditDiv"),
							area:['800px'],
							success:function(index){
								form.val("dataForm",data);
							}
						});
					}
					
					//触发更新或者添加按钮
					form.on("submit(doSubmit)",function(data){
						//alert("aaa");
						$.ajax({
							url:'/patient/patientAddOrEdit',
							contentType:'application/json;charset=utf-8',
							type:"post",
							data:JSON.stringify(data.field),
							success:function(res){
								alert(res);
								layer.close(layers);
							}
						});
						return false;
					});
					
					//触发搜索框表单提交
					form.on("submit(doSearch)",function(data){
						//alert("doSearch");
						//alert(data);
						$.ajax({
							url:'/patient/patientSearch',
							contentType:'application/json;charset=utf-8',
							type:"post",
							data:JSON.stringify(data.field),
							//获得搜索结果后重新渲染表格
							success:function(res){
								//console.log(res);
								table.render({
									elem : '#userTable',
									data:res.data,
									title : '用户数据表',
									toolbar : "#userToolBar",
									height: 'full-130',
									skin: 'row',
									limits:[10,20,30],
									even: true //开启隔行背景
									,page :true,
									cols : [ [

									{
										type : 'checkbox',
										fixed : 'left'
									}, {
										field : 'patientId',
										title : 'ID',
										width : 200,
										fixed : 'left',
										align : 'center'
									},{
										field : 'patientName',
										title : '姓名',
										width : 130
									},  {
										field : 'patientIdcard',
										title : '身份证号',
										width : 160
									}, {
										field : 'patientGender',
										title : '性别',
										width : 80
									}, {
										field : 'patientAge',
										title : '年龄',
										width : 80
									}, {
										field : 'patientTel',
										title : '联系电话',
										width : 180
									}, {
										field : 'address',
										title : '地址',
										width:180
									}, {
										fixed : 'right',
										
										align : 'center',
										toolbar : '#rightToolBar'
									}

									] ]

								});
							}
						}); 
						return false;
					});
				});
	</script>
</body>
</html>
